<template>
	<view class="charts">
		<view class="charts-title">分类文章统计</view>
		<view class="charts-box">
			<qiun-data-charts type="mount" :opts="allopt" :chartData="allData" />
		</view>
		<view class="charts-title">前端文章统计</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="webopt" :chartData="webData" />
		</view>
		<view class="charts-title">后端文章统计</view>
		<view class="charts-box">
			<qiun-data-charts type="rose" :opts="backEndopt" :chartData="backEndData" />
		</view>
		<view class="charts-title">数据库文章统计</view>
		<view class="charts-box">
			<qiun-data-charts type="radar" :opts="databaseopt" :chartData="databaseData" />
		</view>
		<view class="charts-title">其他文章统计</view>
		<view class="charts-box">
			<qiun-data-charts type="ring" :opts="otheropt" :chartData="otherData" />
		</view>
	</view>
</template>

<script>
export default {
	props:['tab'],
  data() {
    return {
      allData: {},
			allopt:{
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          mount: {
            type: "sharp",
            widthRatio: 1.5
          }
        }
      },
			webopt:{
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,10,0,15],
				dataLabel: false,
				dataPointShape: false,
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2,
					data: [
						{
							min: 1,
							max: 150
						}
					]
				},
				extra: {
					line: {
						type: "curve",
						width: 2,
						activeType: "hollow",
						linearType: "custom"
					}
				}
			},
			webData:{},
			backEndopt:{
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [5,5,5,5],
				enableScroll: false,
				legend: {
					show: true,
					position: "left",
					lineHeight: 25
				},
				extra: {
					rose: {
						type: "radius",
						minRadius: 50,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 2,
						borderColor: "#FFFFFF",
						linearType: "custom"
					}
				}
			},
			backEndData:{},
			databaseopt:{
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [5,5,5,5],
				dataLabel: true,
				dataPointShape: false,
				enableScroll: false,
				legend: {
					show: true,
					position: "right",
					lineHeight: 25
				},
				extra: {
					radar: {
						gridType: "circle",
						gridColor: "#CCCCCC",
						gridCount: 3,
						opacity: 1,
						max: 240,
						labelShow: true,
						linearType: "custom",
						border: false
					}
				}
			},
			databaseData:{},
			otheropt:{
				rotate: false,
				rotateLock: false,
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [5,5,5,5],
				dataLabel: true,
				enableScroll: false,
				legend: {
					show: true,
					position: "right",
					lineHeight: 25
				},
				title: {
					name: "",
					fontSize: 8,
					color: "#666666"
				},
				subtitle: {
					name: "",
					fontSize: 25,
					color: "#7cb5ec"
				},
				extra: {
					ring: {
						ringWidth: 60,
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 3,
						borderColor: "#FFFFFF",
						linearType: "custom"
					}
				}
			},
			otherData:{},
    };
  },
	watch:{
		tab(newVal, oldVal){
			if(newVal == 3){
				this.getChartData()
			}
		}
	},
  mounted() {
		this.getChartData()
  },
  methods: {
		getChartData(){
			this.$api.getChartData().then(res => {
				if(res.code == 200){
					this.getAllChart(res.data.all)
					this.getWebChart(res.data.web)
					this.getbackEndChart(res.data.backEnd)
					this.getdatabaseChart(res.data.database)
					this.getOtherChart(res.data.other)
				}
			})
		},
		getAllChart(data){
			let datas = data.map(i => {
				return {
					name:i.name,
					value:i.num
				}
			})
			let res = {
				series:[
					{
						data:datas
					}
				]
			}
			this.allData = JSON.parse(JSON.stringify(res))
		},
		getWebChart(data){
			let cData = data.map(i => {
				return i.name
			})
			let bData = data.map(i => {
				return i.num
			})
			let res = {
				categories:cData,
				series:[
					{
						name: "文章数",
						linearColor: [
							[0,"#1890FF"], 
							[
								0.25,
								"#00B5FF"
							],
							[
								0.5,
								"#00D1ED"
							],
							[
								0.75,
								"#00E6BB"
							],
							[
								1,
								"#90F489"
							]
						],
						setShadow: [
							3,
							8,
							10,
							"#1890FF"
						],
						data: bData
					}
				]
			}
			this.webData = JSON.parse(JSON.stringify(res))
		},
		getbackEndChart(data){
			let datas = data.map(i => {
				return {
					name:i.name,
					value:i.num
				}
			})
			let res = {
				series:[
					{
						data:datas
					}
				]
			}
			this.backEndData = JSON.parse(JSON.stringify(res))
		},
		getdatabaseChart(data){
			let cData = data.map(i => {
				return i.name
			})
			let bData = data.map(i => {
				return i.num
			})
			let res = {
				categories: cData,
				series:[
					{
						name: "文章数",
						data: bData
					}
				]
			}
			this.databaseData = JSON.parse(JSON.stringify(res));
		},
		getOtherChart(data){
			let datas = data.map(i => {
				return {
					name:i.name,
					value:i.num
				}
			})
			let res = {
				series:[
					{
						data:datas
					}
				]
			}
			this.otherData = JSON.parse(JSON.stringify(res))
		}
  }
};
</script>

<style lang="scss">
.charts{
	padding: 20rpx;
	&-title{
		font-size: 36rpx;
		height: 60rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	&-box {
		width: 100%;
		height: 300px;
		padding: 10rpx;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}
}
</style>
